<template>
  <div>
    <detail-banner :sight-name="sightName"
                   :banner-image="bannerImage"
                   :gallery-images="galleryImages">
    </detail-banner>
    <detail-header></detail-header>
    <div class="content-box">
       <detail-list :category-list="categoryList"></detail-list>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import DetailBanner from "./components/banner"
import DetailtHeader from "./components/header"
import DetailList from "./components/list"


export default {
  name: "Detail",
  components: {
    "detail-banner": DetailBanner,
    "detail-header": DetailtHeader,
    "detail-list": DetailList
  },
  data: function() {
    return {
      list: [
        {
          title: "门票",
          children: [
              {
                  title: '成人票',
                  children: [
                    {
                       title: '长者票'
                    }
                  ]
              },
              {
                  title: '儿童票'
              },
              {
                  title: '大学生票'
              },
          ]
        },
        {
          title: "动物世界 + 大马戏"
        },
        {
          title: "电子导游"
        },
        {
          title: "年卡"
        },
        {
          title: "一日游"
        }
      ],
      sightName: '',
      bannerImage: '',
      galleryImages: [],
      categoryList: [],
    };
  },
  methods: {
      getDetailInfo: function() {
          //axios.get('/api/detail.json?id=' + this.$route.params.id)
               //.then(this.getDetailInfoSuccess)

          axios.get('/api/detail.json', {
              params: {
                  id: this.$route.params.id
              }
          })
          .then(this.getDetailInfoSuccess)
      },
      getDetailInfoSuccess: function(res) {
          if (res.data.ret && res.data.data) {
              var data = res.data.data;
              this.sightName = data.sightName;
              this.bannerImage = data.bannerImage;
              this.galleryImages = data.galleryImages;
              this.categoryList = data.categoryList;
          }
      }
  },
  mounted: function(){
      this.getDetailInfo();
  },
//   activated: function() {
//       this.getDetailInfo();
//   }
};
</script>

<style lang='stylus' scoped>
.content-box {
  height: 15rem;
}
</style>


